<template>
	<view class="newComment">
		<van-cell-group inset>
			<view class="con">
				<view class="input">
					<van-field v-model:value="commentContext" rows="1" @input='changeValue'
						:autosize="{ maxHeight: props.maxHeight, minHeight: 20 }" type="textarea" placeholder="来冒个泡吧~"
						maxlength="100" show-word-limit @focus="ifEditing = true" @blur="ifEditing = false" />
				</view>
				<view class="btn" v-if="ifEditing">
					<van-icon @click="sumbitComment" size='80rpx' name="certificate" />
				</view>
			</view>

		</van-cell-group>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	const commentContext = ref('')
	const ifEditing = ref(false)
	const changeValue = (e) => {
		commentContext.value = e.detail
	}
	const sumbitComment = (e) => {
		console.log(commentContext.value)
		commentContext.value = ''
		ifEditing.value = false
	}
	const props = defineProps({
		maxHeight: {
			type: Number,
			default: 180
		}
	})
</script>

<style lang="less" scoped>
	.newComment {
		width: 100%;
		box-sizing: border-box;
		background-color: #eff2f5;
		padding: 10rpx;

		.con {
			display: flex;

			.input {
				flex: 8;
			}

			.btn {
				flex: 1;
				display: flex;
				align-items: flex-end;
			}
		}
	}
</style>